<template>
	<view class="status_bar">
		<!-- 这里是状态栏 -->
	</view>
	<view class="statement">
		<view class="top">
			<text class="left-empty"></text>
			<text>统计报表</text>
			<view class="select" @click="selectAccountBookFn">
				<text>{{defaultAccunt.accountBookName}}</text>
				<uni-icons type="bottom" size="15"></uni-icons>
			</view>
		</view>

		<view class="header">
			<view class="header-in-out">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#007aff"
					@clickItem="onClickItem" />
			</view>

			<picker class="picker" mode="date" fields="month" :value="monthDate" :start="startDate" :end="endDate"
				@change="bindMonthDateChange">
				<text>{{monthDate}}</text>
				<uni-icons type="right" size="15"></uni-icons>
			</picker>

		</view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="charts-box">
				<view>
					支出趋势
				</view>
				<view class="total">
					<text class="total-out">本月累计支出：{{reportData.total}}</text>
					<text>本月平均支出：{{reportData.average}}</text>
				</view>
				<qiun-data-charts v-show="chartShow" type="line" :chartData="reportData.LinearForm" />

			</view>
			<view class="charts-box">
				<view>
					支出占比概况
				</view>
				<qiun-data-charts v-show="chartShow" type="pie" :opts="opts2" :chartData="reportData.percentage" />
			</view>

			<view class="category">
				<view>
					支出类目排行
				</view>
				<!-- 列表明细 -->
				<view v-for="i in reportData.type">
					<view class="list-item">
						<view class="list-item-content">
							<uni-icons :type="i.icon||'wallet'" size="45"></uni-icons>
							<view class="list-item-content-view">
								<view class="list-item-content-view-top">
									<text>
										{{i.name}}
									</text>

									<text> 花费{{ i.number }}笔 </text>
								</view>
								<view class="process">
									<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
								</view>
								<text>本月共支出{{i.money}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

	<selectAccountBook :accountName="defaultAccunt.accountBookName" ref="selectAccountBookRef"
		@selectAccountBookOk="selectAccountBookOk">
	</selectAccountBook>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { reportFormsApi, accountBookApi } from "@/apis/apis"
	import { userStore } from '@/store/user'
	import { getDate } from '@/utils/index';
	import selectAccountBook from '@/components/selectAccountBook/selectAccountBook.vue'
	// 选择账本
	const selectAccountBookRef = ref(null)


	const selectAccountBookFn = () => {
		if (selectAccountBookRef.value) selectAccountBookRef.value.selectAccountBook()
	}
	const selectAccountBookOk = (value : any) => {
		defaultAccunt.value.accountBookName = value.name
		defaultAccunt.value.accountBookId = value.id
		getRepert()
	}

	// 切换
	const current = ref(0)
	const items = ref(['支出', '收入'])

	const onClickItem = (e) => getRepert()

	const startDate = getDate('day', 'start')
	const endDate = getDate('day', 'end')
	const monthDate = ref(getDate('month'))
	const bindMonthDateChange = (e : any) => {
		monthDate.value = e.detail.value as string
		getRepert()
	}



	const percentage = ref({
		series: [
			{
				data: [{ "name": "零食", "value": 50 }, { "name": "水电", "value": 30 }, { "name": "日用品", "value": 20 }, { "name": "出行", "value": 18 }, { "name": "医疗", "value": 8 }]
			}
		]
	})
	const opts2 = ref(

		{
			color: ["#1890FF", "#91CB74"/* , "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" */],
			padding: [5, 5, 5, 5],
			enableScroll: false,
			extra: {
				pie: {
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: false,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				}
			}
		})


	const defaultAccunt = ref({
		accountBookName: '',
		accountBookId: ''
	})
	// 初始化 
	const getAccountBook = async () => {
		const res : any = await accountBookApi.queryPageUsingPOST({ defaulted: '1' })
		if (res.data.records[0]) {
			defaultAccunt.value.accountBookName = res.data.records[0].name
			defaultAccunt.value.accountBookId = res.data.records[0].id
		}
		getRepert()
	}
	const reportData : any = ref({
		"average": "0",
		"total": "0",
		"percentage": {
			series: [
				{
					data: []

				}
			]
		}
		,
		"LinearForm": {
			categories: [],
			series: [
				{
					name: "本月累计支出",
					data: []
				},
				{
					name: "平均支出",
					data: []
				}
			]
		},
		"type": []

	})

	const chartShow = ref(false)

	const pgList = [10, 20, 30, 40]
	const getRepert = async () => {
		chartShow.value = false
		const res : any = await reportFormsApi[current.value === 0 ? 'queryPageUsingPOST_12' : 'queryPageIncomeUsingPOST']({
			accountBookId: defaultAccunt.value.accountBookId,
			date: monthDate.value
		})

		if (res.code == 200) {

			reportData.value.average = res.data.average
			reportData.value.total = res.data.total

			reportData.value.percentage.series[0].data = []

			res.data.percentage?.forEach((e : any) => {
				reportData.value.percentage.series[0].data.push({
					name: e.expenditureItem,
					value: Number(e.money)
				})
			})

			reportData.value.LinearForm.categories = []
			reportData.value.LinearForm.series = [{
				name: "本月累计支出",
				data: []
			},
			{
				name: "平均支出",
				data: []
			}]
			res.data.LinearForm?.forEach((e : any) => {
				reportData.value.LinearForm.categories.push(e.date.split('-')[1])
				reportData.value.LinearForm.series[0].data.push(e.money.split(',')[0])
				reportData.value.LinearForm.series[1].data.push(e.money.split(',')[1])
			})

			reportData.value.type = []

			res.data.type?.forEach((e : any) => {
				reportData.value.type.push({
					name: e.expenditureItem,
					money: e.money,
					number: e.number
				})
			})

			console.log(reportData.value);
			chartShow.value = true

		}
	}
	onLoad(() => {
		getAccountBook()
	})
	onShow(() => {
		// getRepert()
	});
</script>

<style lang="scss" scoped>
	.statement {
		width: 100vw;
		height: 100%;

		.top {
			padding: 10px;
			display: flex;
			justIfy-content: space-between;
			align-items: center;

			.left-empty {
				width: 100px;
			}

			.select {

				font-size: 15px;
				width: 100px;
			}
		}

		.header {
			width: 85%;
			padding: 0 10px 10px;
			display: flex;
			justIfy-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			margin: 0 auto 10px;

			.header-in-out {
				width: 20%;
			}
		}



		.charts-box,
		.category {
			padding: 10px;
			margin: 0 auto 50px;
			width: 85%;
			background-color: #F1F1F1;
			border-radius: 15px;
		}

		.charts-box {
			.total {
				margin: 10px 0;
				width: 100%;

				.total-out {
					margin-right: 20px;
				}
			}
		}

		.scroll-Y {
			height: calc(100vh - 50px - 95px);
		}

		.category {

			// 明细列表
			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;

				.list-item-content {
					width: 100%;
					display: flex;
					align-items: center;

					.list-item-content-view {
						margin-left: 10px;
						width: 100%;

						.list-item-content-view-top {
							display: flex;
							justify-content: space-between;
						}
					}
				}
			}
		}


	}
</style>